var url = location.href;
if (url.indexOf("id") == -1) {
  location.href = "../html/index.html";
}
var id = location.search;
var index = id.substr(id.indexOf("=") + 1);
ajax({
  url: "/sa/details.json",
  data: `id=${index}`,
  success: function (res) {
    res = JSON.parse(res);
    res.data = [...res.data.cake, ...res.data.hai];
    localStorage.setItem("data", JSON.stringify(res));
    var res1 = res.data.filter(function (ite) {
      return ite.id == index;
    })[0];
    render(res1);
    swiper();
    ren(res1);
    $(".shows").eq(0).addClass("active");
  },
});

var con1 = document.querySelector(".con1");
function render(data) {
  if (Object.prototype.toString.call(data.img) == "[object Array]") {
    render1(data);
  } else {
    render2(data);
  }
}
function render1(data) {
  con1.innerHTML = `<div class="lun">
         <div class="swiper-container">
          <div class="swiper-wrapper">
             ${data.img
               .map(function (re) {
                 return `<div class="swiper-slide"><div class="img" style="background:url(${re}) center -150px"></div></div>`;
               })
               .join("")}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="right">
        <h3 class="zhongguo">${data.name}</h3>
        <div class="star">
          <span class="mi ${data.midu}">蜜度</span>
          <span class="zhi ${data.zhidu}">芝度</span>
        </div>
        <p class="mei">
          ${data.content}
        </p>
  
        <div class="bang">
          <div class="tupian">
           ${fuu(data.sizeImg)}
          </div>
          <div class="bang1">
            <span class="ba">${data.sizes}</span>
            <span class="ju">+${data.can}套餐具</span>
            <span class="shiyong">适合${data.shihe}人食用</span>
            <span class="morning">最${data.time}配送</span>
            <div class="pri">￥${data.prices}/</div>
            <a class="limi">16cm</a>
          </div>
        </div>
        <ul class="miy">
            ${fu(data.height)}
            ${mo(data.height)}
        </ul>
        <div class="gouwu">
          <button class="jiaru">加入购物袋</button>
          <button class="liji">立即购买</button>
        </div>
    </div>`;
}
function render2(data) {
  con1.innerHTML = `<div class="lun">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      ${data.img1
        .map(function (re) {
          return `<div class="swiper-slide"><div class="img" style="background:url(${re}) center -60px"></div></div>`;
        })
        .join("")}
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>
<div  class="right1">
  <h3 class="haitai">${data.name}</h3>
  <ul class="song">
    <li>￥${data.prices}/${data.ke}克</li>
  </ul>
  <div class="gouwu">
    <button class="jiaru">加入购物袋</button>
    <button class="liji">立即购买</button>
  </div>
  </div>`;
}

function fu(da) {
  if (Object.prototype.toString.call(da) == "[object Array]") {
    return da
      .map(function (items) {
        return `<li class="btn">${items}</li>`;
      })
      .join("");
  } else {
    return `<li>${da}</li>`;
  }
}
function mo(da) {
  if (Object.prototype.toString.call(da) == "[object Array]") {
    setTimeout(function () {
      $(".miy li.btn").eq(2).nextAll().hide();
      $(".miy li.btn").eq(2).after("<a class='more'>更多</a>");
      $(".more").click(function () {
        $(".miy li.btn").show();
        $(".more").remove();
      });
    }, 5);
  }
  return "";
}

$(document).on("click", ".btn", function (e) {
  $(e.target).addClass("showac").siblings().removeClass("showac");
  $(".shows")
    .eq($(e.target).index())
    .addClass("active")
    .siblings()
    .removeClass("active");
});

function fuu(da) {
  if (Object.prototype.toString.call(da) == "[object Array]") {
    return da
      .map(function (item) {
        return `<img  src="${item}" class="shows" style="display:none"  alt="" / >`;
      })
      .join("");
  } else {
    return `<img  src="${da}"  alt="" />`;
  }
}

//轮播图
// function fun() {
//   // console.log($(document).find(".pic"));
//   var i = 0;
//   function fad() {
//     // $(".pic").eq(0).show("fast");
//     var m = i % 3;
//     $(".pic").hide();
//     $(".pic").eq(m).show("slow");
//     i++;
//   }
//   int = setInterval(fad, 3000);
// }

var tuu = document.querySelector(".tuu");
function ren(data) {
  tuu.innerHTML = data.images
    .map(function (res) {
      return `<img src="${res}" alt="" />`;
    })
    .join("");
}

// 回到顶部
var dingbu = document.querySelector(".dingbu");
window.onscroll = function () {
  var height = window.innerHeight + scrollY;
  if (height > window.innerHeight) {
    dingbu.style.display = "block";
    dingbu.onclick = function () {
      scrollTo({ top: 0, behavior: "smooth" });
    };
  } else {
    dingbu.style.display = "none";
  }
};
//  Initialize Swiper
function swiper() {
  var swiper = new Swiper(".swiper-container", {
    loop: true,
    autoplay: {
      delay: 5000,
      // stopOnLastSlide: false,
      // disableOnInteraction: false,
    },
    effect: "fade",
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + "</span>";
      },
    },
  });
}

//显示更多
function showMore() {
  $(".miy li").show();
}
//加入购物车
con1.onclick = function (e) {
  var e = e || window.event;
  e.returnValue = false;
  if (e.target.classList.contains("jiaru")) {
    let login = getCookie("login");
    console.log(login);
    // console.log(login);
    if (!login) {
      localStorage.setItem("url", location.href);
      location.href = "../html/login.html";
      return;
    }

    //发送添加购物车的ajax请求
    let p = pAjax({
      url: "/sa/addCarData.php",
      type: "post",
      data: {
        username: login,
        goods_id: index,
      },
    });
    p.then((res) => {
      res = JSON.parse(res);
      let r = res.code ? confirm("添加成功是否查看购物袋") : alert("添加失败");
      location.href = r ? "../html/car.html" : "";
    });
  }

  if (e.target.classList.contains("liji")) {
    let login = getCookie("login");
    console.log(login);
    if (!login) {
      localStorage.setItem("url", location.href);
      location.href = "../html/login.html";
      return;
    }

    //发送立即购买的ajax请求
    let p = pAjax({
      url: "/sa/addCarData.php",
      type: "post",
      data: {
        username: login,
        goods_id: index,
      },
    });
    p.then((res) => {
      res = JSON.parse(res);
      location.href = "../html/car.html";
    });
  }
};
